<template>
    <div class="password-container" v-cloak>
        <div class="passwordInner">
            <h5>修改密码</h5>
            <ul class="pw-oprate" >
                <li>
                    <div  class="liInner">
                        <span>账号：</span>
                        <div class="inputBox username">
                          {{username}}  
                        </div>                        
                    </div>
                </li>
                <li>
                    <div class="liInner">
                        <span>原始密码：</span>
                        <div class="inputBox">
                           <el-input placeholder="请输入密码" v-model="input1" show-password></el-input>
                        </div>                        
                    </div>
                </li>
                <li>
                    <div class="liInner">
                        <span>新密码：</span>
                        <div class="inputBox">
                          <el-input placeholder="请输入密码" v-model="input2" show-password></el-input>  
                        </div>                        
                    </div>
                </li>
                <li>
                    <div class="liInner">
                        <span>确认密码：</span>
                        <div class="inputBox">
                          <el-input placeholder="请输入密码" v-model="input3" show-password></el-input> 
                        </div>                        
                    </div>
                </li>
                <li>
                    <div class="liInner">
                       <el-button type="primary" @click="sub_mit">主要按钮</el-button>                        
                    </div>
                </li>   

                
            </ul>
        </div>
    </div>
</template>
<style lang="scss" scoped>
[v-cloak]{ display: none; }
.password-container{
    padding: 50px 40px;
    height: 100%;
    box-sizing: border-box;
    .passwordInner{
        background: #fff;
        width: 100%;
        height: 100%;
        position: relative;
        h5{
            padding-top:30px;
            padding-left:30px;
        }
        .pw-oprate{
            width:400px;
            height:370px;
            position: absolute;
            margin: auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
            li{
                .liInner{
                    display: flex;
                    justify-content: space-between;
                    line-height:40px;
                    margin-bottom: 10px;
                    span{
                        text-align: right;
                        display: block;
                        width: 82px;
                        
                        margin-right: 15px;
                    }
                    .inputBox{
                        flex-grow: 1;

                    }  
                    .username{
                        color:#8062f5;
                    }  
                    button{
                        width:100%
                    }
                }
                
            }

        }
    }
}
</style>
<script>
import { abc } from "../../js/abc.js";
export default {
    data(){
        return{
            "input1":'',
            "input2":'',
            "input3":'',
            "username":''
        }
    },
    mounted(){
        console.log(this.obj)
        this.username = abc.getSession('name')
    },
    methods:{
        sub_mit(){
            var that = this;
            if (that.input1 == '') {
                that.tips('旧密码不能为空')
            } else if (that.input2 == '') {
                that.tips('新密码不能为空')
            } else if (that.input3 == '') {
                that.tips('请再次输入新密码')
            } else if (that.input2 != that.input3) {
                that.tips('两次输入的密码不一致')
            } else if (that.input1 == that.input2) {
                that.tips('新密码不能和原始密码相同')
            } else {
                var opt = {
                    old_password: that.input1,
                    new_password: that.input2,
                    confirm_password: that.input3
                }
                abc.post(that,'v1/user/change',opt,function(acceptData) {
                    that.tips('修改成功~')
                    setTimeout(() => {
                        that.$router.push('/login')
                        abc.deleteSession()    
                    }, 2000);
                    
                })

            }
        },
        tips(msg){
            this.$message(msg);
        }
    }
}
</script>